import { memo, useEffect, useMemo, useState } from "react";
import { useFetch_getCardRecords } from "../../service/cardRecord";
import DataDisplay_content from "../../baseUI/dataDisplay_content/idnex";
import Card from "../../components/card";
import { CardRecordType } from "../../types/cardRecord";
import { CardType, CardTypeType } from "../../types/card";
import { ErrorBlock, InfiniteScroll } from "antd-mobile";

const UserCards = memo(() => {
  const { getCardRecords, loading } = useFetch_getCardRecords();
  // 无限滚动
  const [hasMore, setHasMore] = useState(true);
  const [pageCount, setPageCount] = useState(1);
  // 未失效的消费卡数量
  const [normalNum, setNormalNum] = useState(0);
  const [cardRecordData, setCardRecordData] = useState<CardRecordType[]>([]);
  useEffect(() => {
    void getCardRecords(1, 10).then((res) => {
      setCardRecordData(res);
    });
  }, []);
  const formatData = useMemo(() => {
    if (cardRecordData) {
      setNormalNum(0);
      const normalArr: CardRecordType[] = [];
      const obsoleteArr: CardRecordType[] = [];
      cardRecordData.forEach((item: CardRecordType) => {
        const type = (JSON.parse(item.card) as CardType).type;
        switch (type) {
          case CardTypeType.TIME: {
            if (item.residueTime === 0) {
              obsoleteArr.push(item);
            } else {
              normalArr.push(item);
              setNormalNum((value) => value + 1);
            }
            break;
          }
          case CardTypeType.DURATION: {
            const endDay = new Date(item.endTime);
            const nowDay = new Date();
            if (endDay < nowDay) {
              obsoleteArr.push(item);
            } else {
              normalArr.push(item);
              setNormalNum((value) => value + 1);
            }
          }
        }
      });
      return normalArr.concat(obsoleteArr);
    }
    return [];
  }, [cardRecordData]);
  const loadMore = async () => {
    if (pageCount === 1) {
      setPageCount(pageCount + 1);
      return;
    }
    const res = await getCardRecords(pageCount, 10);
    if (res.length > 0) {
      setPageCount(pageCount + 1);
      setHasMore(true);
      setCardRecordData((value) => {
        return [...value, ...res];
      });
    } else {
      setHasMore(false);
    }
  };
  return (
    <div
      style={{
        padding: "0px 0px var(--tabbar-height)",
      }}
      className="cardRecordsWrapper"
    >
      <DataDisplay_content
        loading={formatData.length === 0 && loading}
        title="个人消费卡"
        showReturnBtn={false}
      >
        {formatData.length > 0 ? (
          formatData?.map((item, index) => (
            <Card
              data={item}
              key={item.id}
              isObsolete={index > normalNum - 1}
            />
          ))
        ) : (
          <ErrorBlock
            status="empty"
            title="暂无消费卡"
            description="快去购买商品获取消费卡吧！"
          />
        )}
        <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={100} />
      </DataDisplay_content>
    </div>
  );
});

export default UserCards;
